<template>
	<view class="fill-info">
		<view class="top-section">
			<image class="bg" src="/static/info-bg.png" mode="widthFix"></image>
			<view class="head">
				<view class="head-line">提交实名认证 获得额度</view>
				<view class="tip">提交后，后续将由客服人员在24小时内致电与您联系</view>
			</view>
		</view>
			
			<view class="main-content">
				<view class="inner">
					<view class="h1">请上传本人身份证照</view>
					<!-- <view class="h2">为有效保障您的租赁体验，提高订单审核效率，请填写与您身份证一致的信息，否则不会审核通过。</view> -->
					<view class="id-pic">
						<view class="item" @click="uploadIdCard('front')">
							<image :src="idCardUp" v-if="idCardUp" class="pic" mode="aspectFill"></image>
							<image v-else src="../static/front.png" class="pic"></image>
							<view class="name">上传身份证人像面</view>
							<view v-if="idCardUp" class="del-pic" @click.stop="idCardUp = ''">x</view>
						</view>
						<view class="item" @click="uploadIdCard('back')">
							<image :src="idCardDown" v-if="idCardDown" class="pic" mode="aspectFill"></image>
							<image v-else src="../static/back.png" class="pic"></image>
							<view class="name">上传身份证国徽面</view>
							<view v-if="idCardDown" class="del-pic" @click.stop="idCardDown = ''">x</view>
						</view>
					</view>
					<view class="note-box">
						<view class="tips">大陆公民持有的本人有效二代身份证，拍摄时确保身份证 <text>边框完整、字体清晰、亮度均匀。</text></view>
						<view class="note-pic">
							<view class="item">
								<image src="../static/id-1.png"></image>
								<text>正确示范</text>
							</view>
							<view class="item">
								<image src="../static/id-2.png"></image>
								<text>曝光强烈</text>
							</view>
							<view class="item">
								<image src="../static/id-3.png"></image>
								<text>边框缺失</text>
							</view>
							<view class="item">
								<image src="../static/id-4.png"></image>
								<text>照片模糊</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		<view class="fixed-box">
			<view class="fixed-btn" :class="{'active' : idCardUp && idCardDown}" @click="postIt">提交</view>
		</view>
		
		<view class="pop-section" v-if="showPop">
			<view class="pop-box">
				<image src="../static/delete.png" class="close" @click="showPop = false"></image>
				<image src="../static/success.png" class="success-pic"></image>
				<view class="title">提交成功</view>
				<view class="sub">客服人员在24小时内致电与您联系</view>
				<view class="getIt" @click="showPop = false">我知道啦</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				idCardUp: '',
				idCardDown: '',
				loginObj: {}
			}
		},
		onLoad(options) {
			this.loginObj = uni.getStorageSync('loginObj')
			this.loginObj = JSON.parse(this.loginObj)
			
			if(this.loginObj.idcardFrontUrl){
				this.idCardDown = this.loginObj.idcardFrontUrl
			}
			if(this.loginObj.idcardBadUrl){
				this.idCardUp = this.loginObj.idcardBadUrl
			}
		},
		methods: {
			uploadIdCard(type){
				this.$common.uploadImageOne('wx/common/upload', (res) => {
					console.log(res)
					if(type == 'front'){
						this.idCardUp = res.url
					}else if(type == 'back'){
						this.idCardDown = res.url
					}
				});
			},
			postIt(){
				this.loginObj.idcardFrontUrl = this.idCardDown
				this.loginObj.idcardBadUrl = this.idCardUp
				
				this.$request({
					url: '/ClientUserController/h5add',
					method: 'post',
					data: this.loginObj
				}).then(res => {
					if(res.code==200){
						// this.idCardUp = ''
						// this.idCardDown = ''
						this.showPop = true
						uni.setStorageSync('loginObj',JSON.stringify(res.data))
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F5F7FA;
	}
	.top-section {
		position: relative;
		
		.bg {
			
			left: 0;
			top: 0;
			z-index: 1;
			width: 100%;
			height: 480rpx;
		}
		
		.head {
			position: absolute;
			z-index: 2;
			left: 24rpx;
			top: 80rpx;
			
			.head-line {
				font-size: 48rpx;
				font-weight: 600;
				color: #1C6FEB;
				line-height: 48rpx;
			}
			
			.tip {
				padding-top: 32rpx;
				font-size: 28rpx;
				color: #4791FF;
				line-height: 28rpx;
			}
		}
		
		
	}
	
	.main-content {
		position: relative;
		top: -200rpx;
		left: 0;
		z-index: 2;
		background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FA 100%);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 24rpx;
		
		.inner {
			padding: 0 24rpx 32rpx 24rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			
			.h1 {
				padding-top: 32rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #1F1F1F;
				line-height: 32rpx;
			}
			
			.h2 {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
		
			.id-pic {
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				
				.item {
					width: 316rpx;
					position: relative;
					
					.del-pic {
						position: absolute;
						top: 0;
						right: 0;
						z-index: 10;
						width: 48rpx;
						height: 48rpx;
						background: rgba(0,0,0,0.4);
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						display: flex;
						justify-content: center;
						font-size: 40rpx;
						color: #fff;
						line-height: 1;
					}
					
					.pic {
						width: 100%;
						height: 208rpx;
					}
					
					.name {
						margin-top: 24rpx;
						text-align: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #1F1F1F;
						line-height: 28rpx;
					}
				}
			}
		
			.note-box {
				margin-top: 32rpx;
				padding-top: 32rpx;
				border-top: 2rpx solid #F5F7FA;
				
				.tips {
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 40rpx;
					
					text {
						color: #FF271F;
					}
				}
			}
		
			.note-pic {
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				
				.item {
					width: 150rpx;
					text-align: center;
					
					image {
						width: 100%;
						height: 128rpx;
					}
					
					text {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #1F1F1F;
						line-height: 24rpx;
					}
				}
			}
		}	
	}
		
	
	.fixed-box {
		padding: 24rpx 32rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 10;
		background-color: #fff;
		padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));///兼容 IOS<11.2/
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
		
		.fixed-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 96rpx;
			background: rgba(255,133,51,0.56);
			border-radius: 24rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			
			&.active {
				background: #FF8533;
			}
		}
	}

	.pop-section {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.pop-box {
			position: relative;
			width: 654rpx;
			height: 532rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			text-align: center;
			padding-top: 48rpx;
			
			.title {
				margin-top: 40rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #292929;
				line-height: 36rpx;
				font-weight: bold;
			}
			
			.sub {
				margin-top: 24rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}
			
			.getIt {
				margin: 48rpx auto 0 auto;
				width: 494rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #FF8533;
				border-radius: 46rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			
			.close {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				z-index: 2;
				width: 40rpx;
				height: 40rpx;
			}
			
			.success-pic {
				margin: 0 auto;
				width: 190rpx;
				height: 176rpx;
			}
		}
	}
</style>